<template>
  <div class="dialog_box">
    <el-dialog v-model="visible" width="500px" :title="`${formData.id ? '编辑' : '新建'}输单原因`" @closed="onClose">
      <el-form ref="formRef" :model="formData" :rules="rules" label-width="auto">
        <el-form-item label="输单原因" prop="name">
          <el-input v-model="formData.name" placeholder="请输入输单原因" clearable maxlength="15" show-word-limit />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="visible = false">取消</el-button>
          <el-button @click="onSubmit(formRef)" type="primary">保存</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
  import { loseAdd, loseEdit } from '@/api/salesleads/salesmanagement/business'
  import { ElMessage } from 'element-plus'
  import { reactive, ref, defineEmits } from 'vue'
  const emit = defineEmits(['submit'])

  const visible: any = ref(false)
  const formRef = ref<any>()
  const defaultProps = {
    checkStrictly: true, // 是否严格的遵守父子节点不互相关联
    emitPath: false,
    multiple: false,
    label: 'name',
    value: 'id'
  }
  const formData = reactive<any>({
    id: '',
    name: '' //名称
  })
  const onClose = () => {
    formData.id = ''
    formData.name = ''
  }
  const rules = reactive<any>({
    name: [{ required: true, message: '请输入输单原因', trigger: 'blur' }]
  })
  const onSubmit = async (formEl: any) => {
    if (!formEl) return
    await formEl.validate((valid: any, fields: any) => {
      if (valid) {
        formData.id
          ? loseEdit(formData).then((res: any) => {
              ElMessage.success('编辑输单原因成功')
              emit('submit')
              visible.value = false
              formData.id = ''
            })
          : loseAdd({ name: formData.name }).then((res: any) => {
              ElMessage.success('新建输单原因成功')
              emit('submit')
              visible.value = false
            })
      }
    })
  }
  defineExpose({
    visible,
    formData
  })
</script>

<style scoped lang="scss">
  .dialog_box {
    :deep(.el-dialog__header) {
      border-bottom: 1px solid #eaeaea;
    }
    :deep(.el-dialog__body) {
      padding: 25px;
      border-bottom: 1px solid #eaeaea;
    }
    .item {
      width: 50%;
    }
    // 员工选择
    .form-staffs {
      display: flex;
      margin-bottom: 10px;

      .title {
        margin-right: 12px;
      }

      .staffs {
        &_item {
          height: 22px;
          line-height: 22px;
          margin-right: 6px;
          // padding: 0;
          color: #35383a;
          border: 1px solid #fffaf9;
          border-radius: 1px 1px 1px 1px;
          background: #fffaf9;
        }

        :deep .el-tag .el-icon {
          width: 12px;
          height: 12px;
          color: #ffffff;
          background: #d9d9d9;
        }

        :deep .el-tag .el-icon svg {
          margin: 0px;
        }

        :deep .el-tag .el-tag__close:hover {
          background: #d9d9d9;
        }
        :deep span.el-tag.el-tag--light.staffs_item:before {
          content: '';
          display: inline-block;
          width: 10px;
          height: 11px;
          background: url('@/assets/image/LiveCode/people_icon.png') center/100% no-repeat;
          margin-right: 10px;
        }
      }
    }
    .discount {
      display: flex;
      align-items: center;
    }
    .btn_box {
      display: flex;
      align-items: center;
      font-size: 23px;
      img {
        width: 20px;
        margin-right: 15px;
      }
      .el-icon {
        margin-right: 15px;
        cursor: pointer;
      }
    }
  }
</style>
